<template>
  <!-- <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div> -->

  <div class="hello">
    <com-color-button type="success" :disabled="false">按钮</com-color-button> 
    <com-color-button :disabled="true">按钮</com-color-button>
  </div>


  <div>
    <div class="sc">
      允许放兄弟节点
      <div class="hh">hahahh</div>
    </div>
    <input type="text" v-model="state.myname" />
    <h2>姓名:{{ state.myname }}</h2>
    <h2>性别:{{ state.sex }}</h2>

    <h2>姓名:{{ myname }}</h2>
    <h2>性别:{{ sex }}</h2>
    <!-- <button @click="changeName">改变名字</button> -->
    <br />
    <input type="text" v-model="fullInfo" />
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { computed, reactive, ref, toRefs, watch, watchEffect } from 'vue'
import { useCount } from '../utils/hooks.js'
export default {
  name: 'Home',
  components: {
    // HelloWorld
  },
  setup(props, context) {
    // console.log('setup')
    // 响应式对象 状态
    // let name = '张三' // 非响应式
    const name = ref({
      value: 'abc'
    }) // 响应式  基本数据类型
    // console.log(name)
    watch(
      name.value,
      (newv, oldv) => {
        console.log(newv, oldv)
      },
      { immediate: true }
    )

    const job = ref({
      type: '类型'
    }) // 响应式  对象类型
    function changeName() {
      name.value = '李四' // name 经过ref后 变为 refimpl 对象
    }

    const { count, min, add } = useCount()

    // reactive 定义一个对象类型的响应式数据
    // reactive 定义的响应式数据 是深层次的
    const state = reactive({
      myname: 'kerwin',
      sex: 'boy',
      datalist: [
        {
          id: 1,
          count: count
        },
        {
          id: 2,
          count: count
        }
      ]
    })

    // 不指明具体监视哪个属性，回调中使用了哪个属性，就监测哪个属性
    watchEffect(() => {
      const x2 = state.myname
      console.log('watchEffect监测到变化了')
    })

    // 默认开启深度监听，无法正确拿到oldValue
    // watch(
    //   state,
    //   (newV, oldV) => {
    //     console.log('state改变了', newV, oldV)
    //   },
    //   { immediate: false }
    // )

    // 监听 reactive 对象的某个属性
    // watch(
    //   () => state.myname,
    //   (newV, oldV) => {
    //     console.log('state改变了', newV, oldV)
    //   },
    //   { immediate: false }
    // )

    // 监听 reactive 对象的多个属性
    // watch(
    //   [() => state.myname, () => state.sex],
    //   (newV, oldV) => {
    //     console.log('state改变了', newV, oldV)
    //   },
    //   { immediate: false }
    // )

    // 监听 reactive 对象的某个属性(属性是对象) 需要开启深度监听
    watch(
      () => state.datalist,
      (newV, oldV) => {
        console.log('state改变了', newV, oldV)
      },
      { deep: true }
    )

    const fullInfo = computed({
      get() {
        return state.myname + '-' + state.sex
      },
      set(value) {
        const valueArr = value.split('-')
        state.myname = valueArr[0]
        state.sex = valueArr[1]
      }
    })

    // 方法的定义
    const handleChange = () => {
      state.myname = 'xiaoming'
    }

    const changeList = () => {
      state.datalist[1] = 'hhhh'
    }

    return {
      state,
      fullInfo,
      handleChange,
      changeList,
      min,
      add,

      ...toRefs(state),
      name,
      job,
      changeName
    }
  }
}
</script>

<style lang="scss">
.sc {
  color: #ff00ff;

  .hh {
    font-size: 36px;
  }
}
</style>
